<!-- 用户信息 -->
<template>
  <el-card shadow="never" body-style="padding: 20px;">
    <div class="ele-cell workplace-user-card">
      <div class="ele-cell-content ele-cell">
        <!--        <el-avatar :size="68" :src="loginUser.avatar" />-->
        <el-avatar style="background-color: #fff" :size="68" :src="require('@/assets/user.png')" />
        <div class="ele-cell-content">
          <h4 class="ele-elip">
            <span v-if="(new Date().getHours())<10">早安,</span>
            <span v-if="(new Date().getHours())<12 && (new Date().getHours())>10">上午好,</span>
            <span v-if="(new Date().getHours())<18 && (new Date().getHours())>12">下午好,</span>
            <span v-if="(new Date().getHours())<23 && (new Date().getHours())>18">晚上好,</span>
            {{ loginUser.nickname }} , 开始您一天的工作吧!
          </h4>
          <div class="ele-text-secondary ele-elip" style="margin-top: 8px">
            <em v-if="orderData">账号到期时间：{{orderData.prescription}}</em>
          </div>
        </div>
      </div>
      <div class="workplace-count-group">
        <div class="workplace-count-item" @click="toGo">
          <div class="workplace-count-header" style="display:flex;">
            <el-tag type="warning" size="small" class="ele-tag-round">
              <i class="el-icon-_infinite"></i>
            </el-tag>
            <div class="flex-column" style="min-width: 80px">
              <span class="workplace-count-name">可用点数</span>
              <div class="m-top10">
                <vue-count-up
                  style="font-size: 20px;"
                  :delay="0"
                  :end-val="countUpVal"
                  :options="countUpOptions"
                  @ready="onCountUpReady" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
  import VueCountUp from 'vue-countup-v2';
  import { getDianShu  } from '@/api/system/user';
  export default {
    name: 'ProfileCard',
    components: { VueCountUp },
    computed: {
      // 当前登录用户信息
      loginUser() {
        return this.$store.state.user.info;
      }
    },
    data() {
      return {
        // 表单数据
        orderData: {
        },

        // countUp 值
        countUpVal: 0,
        // countUp 配置
        countUpOptions: {
          useEasing: true,
          useGrouping: true,
          separator: ',',
          decimal: '.',
          prefix: '',
          suffix: ''
        },
        // countUp 实例
        countUpIns: null
      };
    },
    // mounted() {
    activated() {
      // 查询可用点数
      getDianShu({
        id: this.$store.state.user.info.merchantId
      }).then((msg) => {
        console.log('msg',msg)
        if(msg){
          this.countUpVal= msg.counts;  // 剩余点数
          this.orderData = msg;
        }
      })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    methods:{
      /* countUp 渲染完成 */
      onCountUpReady(instance){
        this.countUpIns = instance;
      },
      toGo(){
        this.$router.push({path:'/staffManage/rechargeRecord'})
      }
    }
  };
</script>

<style scoped>
  .workplace-user-card .ele-cell-content {
    overflow: hidden;
  }

  .workplace-count-group {
    white-space: nowrap;
  }

  .workplace-count-item {
    padding: 0 5px 0 25px;
    box-sizing: border-box;
    display: inline-block;
    text-align: right;
  }

  .workplace-count-name {
    padding-left: 8px;
  }

  .workplace-count-num {
    font-size: 24px;
    margin-top: 6px;
  }

  @media screen and (max-width: 992px) {
    .workplace-count-item {
      padding: 0 5px 0 10px;
    }
  }

  @media screen and (max-width: 768px) {
    .workplace-user-card,
    .workplace-count-group {
      display: block;
    }

    .workplace-count-group {
      margin-top: 15px;
      text-align: right;
    }
  }
</style>
